<template>
    <div id="issue">
        <p class="page-title">纠纷订单</p>
        <div class="container">
            <el-alert
                    title="24小时卖家未完成退款处理,平台自动申请介入！"
                    show-icon
                    type="info">
            </el-alert>
            <div class="filter">
                <el-form :inline="true">
                    <el-form-item label="">
                        <el-date-picker
                                v-model="searchForm.time"
                                type="daterange"
                                start-placeholder="开始日期"
                                range-separator="至"
                                end-placeholder="结束日期"
                                value-format="timestamp"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select
                                v-model="searchForm.da_leimu_id"
                                type="date"

                                placeholder="选择类目">
                            <el-option v-for="item in $store.state.indexTypes.da_fenlei_data"
                                       :key="item.Id"
                                       :label="item.fenlei_mingcheng"
                                       :value="item.Id"

                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="请输入关键词" v-model="searchForm.shangping_mingcheng"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="请输入订单号" v-model="searchForm.ddh"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList" :loading="tableLoading">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table">
                <el-table
                        :data="tableData"
                        stripe
                        v-loading="tableLoading"
                        style="width: 100%">
                    <el-table-column
                            prop="ddh"
                            label="订单号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="create_time"
                            label="纠纷时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="shangping_mingcheng"
                            label="商品名称">
                    </el-table-column>
                    <el-table-column
                            prop="shouhou_zhuangtai"
                            label="状态">
                        <template v-slot="scope">
                            {{scope.row.shouhou_zhuangtai | statuStr}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="shouhou_zhuangtai"
                            label="操作">


                        <template slot-scope="scope">
                            <el-link type="danger"
                                     class="m-r"
                                       @click="cancelOrder(scope.row.ddh)"
                                       v-if="scope.row.shouhou_zhuangtai=== 2 || scope.row.shouhou_zhuangtai === 3">
                                <i class="el-icon-circle-close"></i>
                                取消退款
                            </el-link>
                            <el-link type="primary" @click="chat(scope.row.ddh)" v-if="scope.row.shouhou_zhuangtai=== 2">
                               <i class="el-icon-chat-line-round"></i> 继续沟通
                            </el-link>
                            <el-link type="warning" @click="afterDialog = true;afterForm.ddh = scope.row.ddh;"
                                       v-if="scope.row.shouhou_zhuangtai=== 3">
                              <i class="el-icon-edit"></i>  修改退款原因
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="text-center m-t-lg">
                <pagination :total="total" :options="searchForm" @change="getList"></pagination>
            </div>

            <!--修改退款请求-->
            <el-dialog :title="`修改退款原因：`+afterForm.ddh" :visible.sync="afterDialog" width="35%">
                <div class="r-item m-b">
                    退款原因：
                    <el-select v-model="afterForm.tuikuan_yuanying">
                        <el-option v-for="item in reason" :label="item.name"
                                   :value="item.value"
                                   :key="item.value"></el-option>
                    </el-select>
                </div>

                <el-input type="textarea" rows="6" v-model="afterForm.tuikuan_liyou" placeholder="请输入退款理由 "></el-input>

                <span slot="footer" class="dialog-footer">
                  <el-button @click="afterDialog = false">取 消</el-button>
                     <el-button type="primary" @click="after" :loading="afterLoading">确 定</el-button>
                 </span>
            </el-dialog>


        </div>
    </div>
</template>

<script>
    export default {
        name: 'issue',
        components: {},
        data() {
            return {
                total: 0,
                chatDialog: false,
                tableLoading: true,
                afterLoading: false,
                afterDialog: false,
                reason: [
                    {
                        name: '卡密,卡号,账号不存在',
                        value: 1
                    },
                    {
                        name: '软件,商品无法正常使用',
                        value: 2
                    },
                    {
                        name: '其他原因',
                        value: 3
                    },
                ],
                searchForm: {
                    da_leimu_id: '',
                    page: 1,
                    ddh: '',
                    shangping_mingcheng: '',
                    time: ''
                },
                //修改退款请求
                afterForm: {
                    ddh: '',
                    tuikuan_yuanying: 1,
                    tuikuan_liyou: ''
                },
                tableData: [],
                typeList: {
                    da_fenlei_data: [],
                    xiao_fenlei_data: []
                },
            }
        },
        computed: {},
        filters: {
            statuStr(val) {
                let obj = {
                    2: '买家申请售后，等待卖家处理',
                    3: '卖家拒绝退款请求，请修改退款申请',
                    4: '退款已取消',
                    5: '卖家已同意退款',
                }
                return obj[val];
            }
        },
        methods: {
            //获取纠纷列表
            getList() {
                this.tableLoading = true;
                this.$axios.post(`/api/user/jiufen_dingdan`, this.searchForm)
                    .then(res => {
                        this.tableLoading = false;
                        this.total = res.data.shuliang;
                        this.tableData = res.data.dingdan_data;
                    })
            },
            chat(id) {
                this.$router.push({name: 'chat', query: {id,type:'1'}})
            },
            //获取商品分类
            getType() {
                this.$axios.post(`/api/user/get_fenlei`, this.searchForm)
                    .then(res => {
                        if (res.code === `200`) {
                            this.typeList = res.data;
                            this.typeList.da_fenlei_data.unshift({
                                Id: '',
                                fenlei_mingcheng: '全部'
                            })
                        }
                    })
            },
            //取消退款
            cancelOrder(ddh) {
                this.$confirm('取消退款后无法再次提交退款申请,是否确认取消?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            this.$axios.post(`/api/user/quxiao_tuiguang`, {ddh})
                                .then(res => {
                                    done();
                                    instance.confirmButtonLoading = false;
                                    if (res.code === `200`) {
                                        this.$message.success('操作成功');
                                        this.getList();
                                    }
                                })
                        } else {
                            done();
                        }
                    }
                }).then(() => {

                })

            },
            //修改退款原因
            after() {
                this.afterLoading = true;
                this.$axios.post(`/api/user/xiugai_tuikuan_yuanying`, this.afterForm)
                    .then(res => {
                        this.afterLoading = false;
                        if (res.code === `200`) {
                            this.afterDialog = false;
                            this.$message.success(res.msg);
                            this.getList()
                        }
                    })
            },
        },
        async created() {
            await this.getType();
            this.getList()
        },
    }
</script>

<style lang="less" scoped>
    #issue {
        .container {
            .el-alert {
                background: #F0F5FF;
                color: #409EFF;
                font-size: 20px;
            }
            .filter {
                margin-top: 20px;
            }
        }
    }
</style>
